<template>
  <a-card>
    <a-row>
      <a-col :span="24">
        <div class="table-container">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <!-- 搜索区域 -->
            <a-form-model layout="inline" v-bind="searchModelConfig" @keyup.enter.native="searchQuery">
              <a-row v-bind="searchRowConfig">
                <a-col v-bind="searchColConfig">
                  <a-form-model-item label="关键字">
                    <a-input placeholder="请输入关键字查询" v-model="queryParam.searchValue"></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="searchColConfig">
                  <a-form-model-item label="创建时间">
                    <ry-range-picker :beginTime.sync="queryParam.beginTime" :endTime.sync="queryParam.endTime" />
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="searchColConfig" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">搜索</a-button>
                  <a-button @click="searchReset" icon="reload">重置</a-button>
                </a-col>
              </a-row>
            </a-form-model>
          </div>

          <!-- 操作按钮区域 -->
          <div class="table-operator">
            <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
          </div>

          <!-- table区域-begin -->
          <a-row>
            <a-col :span="24">
              <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns" :loading="loading" :data-source="dataSource" :rowKey="record=>record.id"
                :pagination="ipagination" bordered :scroll="{ x: 'max-content'}">
                <template slot="action" slot-scope="text,record">
                  <ry-tooltip-button title="编辑" type="primary" icon="edit" @click="handleEdit(record)" />
                  <ry-tooltip-button title="权限" type="primary" icon="file-protect" @click="handleUds(record)" />
                  <ry-tooltip-button title="删除" type="danger" icon="delete" @click="handleDelete(record.id)" />
                </template>
              </a-table>
            </a-col>
          </a-row>
          <!-- table区域-end -->
          <Role-modal ref="modalForm" @ModalOk="modalFormOk" :url="url"></Role-modal>
          <Role-per-modal ref="modalPerForm" @ModalOk="modalFormOk" :url="url"></Role-per-modal>
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import RoleModal from './modules/RoleModal'
import RolePerModal from './modules/RolePerModal'
import { RyListMixin } from '@/ryweb'
// import { this.$get } from '@/api/manage'
export default {
  name: '',
  mixins: [RyListMixin],
  components: { RoleModal, RolePerModal },
  data () {
    return {
      queryParam: {
        searchValue: '',
        beginTime: null,
        endTime: null
      },
      // 表头
      dateRange: null,
      loading: true,
      columns: [
        {
          title: '角色编号',
          align: 'center',
          dataIndex: 'id'
        },
        {
          title: '角色名称',
          align: 'center',
          dataIndex: 'roleName'
        },
        {
          title: '权限字符',
          align: 'center',
          dataIndex: 'roleCode'
        },
        {
          title: '显示顺序',
          dataIndex: 'sortNo',
          align: 'center',
          ellipsis: true
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center',
          ellipsis: true
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 200,
          fixed: 'right'
        }
      ],
      url: {
        list: this.$api.permission.role.role,
        delete: this.$api.permission.role.delete,
        deleteBatch: this.$api.permission.role.delete,
        add: this.$api.permission.role.insert,
        edit: this.$api.permission.role.update,
        modalInfo: this.$api.permission.role.byId,
        dataScopeInfo: this.$api.permission.role.dataScope
      }
    }
  },
  props: {},
  computed: {},
  watch: {},
  methods: {
    handleUds (record) {
      this.$refs.modalPerForm.edit(record)
    },
    dateChange (dates, strings) {
      this.queryParam.beginTime = dates[0]._d
      this.queryParam.endTime = dates[1]._d
    }
  },
  filters: {},
  created () {

  },
  mounted () {
  },
  beforeDestroy () { }
}
</script>

<style scoped>
.tree-box {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background: #fff;
  border-right: 4px solid #f0f2f5;
  overflow: auto;
}
.tab-box {
  /* position: absolute;
  left: 14%;
  right: 0;
  top: 0;
  bottom: 0; */
  /* overflow: auto; */
  margin-left: 200px;
  /* overflow: auto; */
}
</style>
